<!--
 * @Author: Vi卡农
 * @Date: 2020-05-11 11:59:56
 * @LastEditTime: 2020-05-15 17:19:47
 * @Description: -合同详情页-
 * @FilePath: \cshf_admin\src\views\modules\contract\page\contractLease.vue
 -->
<template>
  <div class="intentionLease" v-loading="loading">
    <div class="HomeLease_infoBox">
      <span class="card_title">基本信息</span>
      <span class="signType1">{{$getDictLabel("houseTransactionType",dataForm.transactionType)}}</span>
      <el-tag size="small" style="margin-left:10px">{{$getDictLabel("dictType",dataForm.type)}}</el-tag>

      <ul class="cont_ul">
        <li class="list_background">
          <div>
            <span>楼盘：</span>
            <span>{{dataForm.dictName}}</span>
          </div>
           <div>
            <span>房源编号：</span>
            <el-button
              style="color: #3E8EF7"
              type="text"
              @click="goHouse(dataForm.houseId,dataForm.transactionType,dataForm.type)"
            >{{"FY-"+dataForm.houseId}}</el-button>
          </div>
          <div>
            <span>客源编号：</span>
            <el-button
              style="color: #3E8EF7"
              type="text"
              @click="goCustomer(dataForm.customerId,dataForm.customerType)"
            >{{"KY-"+dataForm.customerId}}</el-button>
          </div>
          <div>
            <span>状态：</span>
            <span>{{$getDictLabel("contractState",dataForm.state)}}</span>
          </div>
        </li>

        <li>
          <div>
            <span>面积：</span>
            <span>{{dataForm.area}}㎡</span>
          </div>
          <div>
            <span>单价：</span>
            <span>{{dataForm.price}}</span>
          </div>
          <div>
            <span>总价：</span>
            <span>{{dataForm.pirces}}</span>
          </div>
          <div>
            <span>税收：</span>
            <span>{{$getDictLabel("houseTaxation",dataForm.taxation)}}</span>
          </div>
        </li>

        <li class="list_background">
          <div>
            <span>装修：</span>
            <span>{{ $getDictLabel("dictRenovation",dataForm.renovation)}}</span>
          </div>
          <div>
            <span>免租期：</span>
            <span>{{dataForm.tenanFreeTime}} 天</span>
          </div>
          <div>
            <span>递增：</span>
            <span>{{dataForm.increase}}</span>
          </div>
          <div>
            <span>合同年限：</span>
            <span>{{dataForm.tenanTime}}</span>
          </div>
        </li>

        <li>
          <div>
            <span>付款方式：</span>
            <span>{{$getDictLabel("dictOwnerBuy",dataForm.payType)}}</span>
          </div>
          <div>
            <span>发票：</span>
            <span>{{dataForm.buyBill=='0'?'没有':'有'}}</span>
          </div>
          <div>
            <span>业主方：</span>
            <span>{{dataForm.ownerName}}</span>
          </div>
          <div>
            <span>客户方：</span>
            <span>{{dataForm.customerName}}</span>
          </div>
        </li>

        <li class="list_background">
          <div>
            <span>签约时间：</span>
            <span>{{dataForm.signingData}}</span>
          </div>
          <div>
            <span>合同佣金：</span>
            <span>{{dataForm.commission}} 元</span>
          </div>
          <div>
            <span>外佣：</span>
            <span>{{dataForm.externalCommission}}元</span>
          </div>
          <div>
            <!-- <span>平台佣金：</span>
            <span>{{dataForm.platformCommission}} 元</span>
            <el-divider direction="vertical"></el-divider> -->
            <span>业绩佣金：</span>
            <span>{{dataForm.achievementCommission}} 元</span>
          </div>
        </li>
      </ul>
      <div class="w100 cont_conf">
        <span class="cont_conf_title">家具列表：</span>
        <div class="cont_conf_list">
          <el-checkbox-group v-model="confList" disabled>
            <el-checkbox
              :label="item.dictValue"
              v-for="(item,index) in $getDictDataList('dictConf')"
              :key="index"
            >{{item.dictLabel}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>

    <div class="HomeLease_infoBox">
      <span class="card_title">佣金分配</span>
      <ul class="Commission_ul">
        <li v-for="item in commissionList">
          <div class="list_background">{{item.dictLabel}}</div>
          <div>{{item.userName}}</div>
          <div class="list_background">{{item.commission}} 元</div>
        </li>
      </ul>
    </div>

    <div class="box_shadow" style="margin:10px 5px;padding:0px 8px">
      <el-row>
        <el-col :span="12">
          <span class="card_title" style="width:180px;">合同图片</span>
          <el-radio-group v-model="FYimgviewType" @change="getimg">
            <el-radio :label="1">房东资料</el-radio>
            <el-radio :label="2">客户资料</el-radio>
            <el-radio :label="3">合同资料</el-radio>
          </el-radio-group>
        </el-col>
        <span class="float_r" style="margin:10px;">
          <el-button type="primary" @click="UploadImg">上传图片</el-button>
          <el-button type="primary" v-if="imglist.length>1" @click="deleteImage">批量删除</el-button>
          <el-button type="primary" v-if="imglist.length>1" @click="downloadImage">批量下载</el-button>
        </span>
      </el-row>

      <div class="LP_imgList martop10">
        <div v-if="imglist.length<1" class="svgColor2 lih33 marg_t15">暂无</div>
        <el-checkbox-group v-if="MaintainType" v-model="checkList" class="House_img_check">
          <el-checkbox :label="item.id" v-for="(item,index) in imglist" :key="index" :value="item">
            <div class="checkbox_div">
              <el-image :src="item.url" :preview-src-list="getSrcList(index)"></el-image>
            </div>
            <span class="colorGray float_l">{{item.title}}</span>
            <span class="colorGray float_r">--{{item.maintainName}}</span>
            <br />
            <span class="colorGray float_l">{{$getDictLabel("examine",item.examine)}}</span>
            <!-- <span class="Imgedit float_r" @click="ImgeditClick(item)">
              <svg class="icon-svg svgColor3 svgStyle2" aria-hidden="true">
                <use xlink:href="#edit2" />
              </svg>
            </span>-->
          </el-checkbox>
        </el-checkbox-group>
        <ul v-else>
          <li v-for="(item,index) in imglist" class="House_img_li" :key="index">
            <div class="House_img_li_div">
              <el-image :src="item.url" :preview-src-list="getSrcList(index)"></el-image>
            </div>
            <div class="House_img_li_title martop5">
              <span class="colorGray float_l">{{item.title}}</span>
              <span class="colorGray float_r">--{{item.maintainName}}</span>
            </div>
            <span class="colorGray float_l">{{$getDictLabel("examine",item.examine)}}</span>
          </li>
        </ul>
      </div>
    </div>

    <el-dialog title="上传合同图片" :visible.sync="FYdialogVisible" width="30%" :destroy-on-close="true">
      <el-form ref="form" :model="FYimgUploadFrom" label-width="50px" label-position="top">
        <el-form-item label="类型">
          <el-radio-group v-model="FYimgUploadFrom.imageType">
            <el-radio :label="1">房东资料</el-radio>
            <el-radio :label="2">客户资料</el-radio>
            <el-radio :label="3">合同资料</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="FYimgUploadFrom.title"></el-input>
        </el-form-item>
        <el-form-item label="选择图片">
          <el-upload
            class="upload-demo"
            ref="FJupload"
            action="/project/projectinfo/apartmentUpload"
            :file-list="fileListFY"
            :auto-upload="false"
            :limit="10"
            list-type="picture-card"
            :multiple="true"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="FYdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="FJuploadFun" :loading="BtnLoading">点击上传</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      loading: true,
      MaintainType: true,
      dataForm: {},
      confList: [],
      commissionList: [],
      BtnLoading: false,
      FYimgviewType: 1,
      checkList: [], //图片选中数组
      imglist: [], //图片显示数组
      previewImglist: [], //预览图片数组
      fileListFY: [],
      BtnLoading: false,
      FYimgviewType: 1,
      FYimgUploadFrom: {
        title: "",
        imageType: 1 //图片上传类型
      },
      fileListFY: [],
      FYdialogVisible: false
    };
  },
  props: ["contractId"],
  created() {
    if (this.contractId) {
      this.getIntention();
      // this.getcommission();
      this.getimg();
    }
  },
  methods: {
    //获取合同详情
    getIntention() {
      let _this = this;
      this.$http
        .get("/contract/contractinfo/" + _this.contractId)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.dataForm = res.data;
          if (res.data.conf) {
            _this.confList = res.data.conf.split(",");
          } else {
            _this.confList = [];
          }
          _this.loading = false;
        })
        .catch(() => {});
    },
    //获取合同佣金
    getcommission() {
      let _this = this;
      this.$http
        .get("/contract/contractinfo/commission", {
          params: {
            contractId: _this.contractId
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.commissionList = res.data;
        })
        .catch(() => {});
    },
//跳转到列表页
    goHouse(ID, transactionType, type) {
      this.$router.push({
        name: "HousingPages",
        query: {
          ID: ID,
          transactionType: transactionType,
          type: type
        }
      });
    },
    goCustomer(ID, customerType) {
      this.$router.push({
        name: "customerPage",
        query: {
          ID: ID,
          customerType: customerType
        }
      });
    },
    //获取合同图片
    getimg() {
      let _this = this;
      _this.imglist = [];
      _this.previewImglist = [];
      this.$http
        .get("/contract/contractimage/imageList", {
          params: {
            contractId: _this.contractId,
            imageType: _this.FYimgviewType
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.imglist = res.data;
          for (let i = 0; i < _this.imglist.length; i++) {
            _this.previewImglist.push(_this.imglist[i].url);
          }
        })
        .catch(() => {});
    },
    //预览图片list
    getSrcList(index) {
      return this.previewImglist
        .slice(index)
        .concat(this.previewImglist.slice(0, index));
    },
    //点击上传合同图片
    UploadImg() {
      this.fileListFY = [];
      this.FYimgUploadFrom = {
        title: "",
        imageType: this.FYimgviewType //图片上传类型
      };
      this.FYdialogVisible = true;
    },
    //确定上传合同图片
    FJuploadFun() {
      let _this = this;
      _this.BtnLoading = true;
      let formData = new FormData();
      for (let i = 0; i < this.$refs.FJupload.uploadFiles.length; i++) {
        formData.append("files", this.$refs.FJupload.uploadFiles[i].raw);
      }
      this.$http
        .post("/contract/contractimage/upload", formData, {
          params: {
            contractId: _this.contractId,
            title: _this.FYimgUploadFrom.title,
            imageType: _this.FYimgUploadFrom.imageType
          }
        })
        .then(({ data: res }) => {
          _this.BtnLoading = false;
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("上传成功！");
          _this.FYdialogVisible = false;

          _this.getimg();
        })
        .catch(() => {
          _this.BtnLoading = false;
        });
    },
    //删除合同图片
    deleteImage() {
      let _this = this;
      if (_this.checkList.length < 1) {
        this.$message({
          type: "info",
          message: "请选择要删除的图片"
        });
        return;
      }
      this.$confirm("您将批量删除选中的图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .delete(`/contract/contractimage`, {
              data: _this.checkList
            })
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              _this.$message.success("删除成功！");
              _this.checkList = [];
              _this.getimg();
            })
            .catch(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //批量下载合同图片
    downloadImage() {
      let _this = this;
      let url = "/contract/contractimage/downloadimage1";
      if (_this.checkList.length < 1) {
        this.$message({
          type: "info",
          message: "请选择要下载的图片"
        });
        return;
      }
      let allurl =
        window.SITE_CONFIG["apiURL"] + url + "?ids=" + _this.checkList.join();
      let a = document.createElement("a");
      a.setAttribute("href", allurl);
      a.click();
    }
  },
  watch: {
    contractId: {
      handler(newValue, oldValue) {
        this.getIntention();
        this.getcommission();
        this.getimg();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.LP_imgList {
  width: 100%;
  padding: 0px 10px;

  .el-pagination {
    margin-top: 15px;
  }
}

.LP_imgList ul {
  width: 100%;
  height: 77%;
  overflow: hidden;
  margin: 0;
}
</style>